<template>
  <div class="wuliu">
    <top></top>
    <div v-loading='loading' style="padding: 20px;">

      <div class="kflexbc">
        <div class="kflexc">
          <el-date-picker style="width: 450px; margin-right: 20px;" @change="changetime()" v-model="time"  :default-time="['00:00:00', '23:59:59']" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" placeholder="选择日期时间"></el-date-picker>
          <el-button type="danger" round @click="daochu">导出</el-button>
        </div>
        <el-button type="warning" round @click="peizhikai">配置商品编码</el-button>
      </div>
<!--      <el-table :data="list" border style="width: 100%; margin: 20px 0;" ref="multipleTable" >

        <el-table-column align='center' prop='created_at' label="导入时间"></el-table-column>
        <el-table-column align='center' prop='import_count' label="查询单量"></el-table-column>
        <el-table-column align='center' prop='order_count' label="去重后订单数"></el-table-column>
        <el-table-column align='center' label="查询状态">
          <template slot-scope="scope">
            <div v-if="scope.row.status == 0">未开始</div>
            <div v-if="scope.row.status == 10">查询中</div>
            <div v-if="scope.row.status == 20">已完成</div>
            <div v-if="scope.row.status == -10">异常</div>
          </template>
        </el-table-column>
        <el-table-column align='center' label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="mini" v-if="scope.row.result_file" @click="xiazai2(scope.row.result_file)">下载查询结果</el-button>
          </template>
        </el-table-column>

      </el-table>
      <el-pagination style="text-align: right;" background layout="total,prev, pager, next" :current-page="all.page" @current-change="fanye" :page-size="all.page_size" :total="total"></el-pagination> -->
    </div>

    <el-dialog title="配置商品编码" :visible.sync="log" width="640px"  :close-on-click-modal="false" :close-on-press-escape="false">

        <!-- <div style="margin-bottom: 50px;">
          <div class="kflexc">
            <div style="width: 250px;">1111111111111111111111</div>
            <div style="margin-left: 20px; color: #077ECE;">删除</div>
          </div>
        </div>
        -->
        <el-table :data="list" border style="width: 100%; margin: 20px 0;" ref="multipleTable" >
          <el-table-column align='center' label="编码">
            <template slot-scope="scope">
              {{scope.row.fetch_code}}
            </template>
          </el-table-column>
          <el-table-column align='center' label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="mini" @click="shanchu(scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="kflexc" style="margin-top: 20px;"  >

          <el-select v-model="shangpinid" style="width: 350px; margin-right: 20px;" @change="xuanzhong" filterable clearable placeholder="请输入商品编码">
            <el-option v-for="item in shangpins" :label="item.title + item.fetch_code" :key="item.id" :value="item.id"></el-option>
          </el-select>
          <el-button type="danger" round @click="tianjia()">添加</el-button>

        </div>

    	  <!-- <span slot="footer" class="dialog-footer">
          <el-button type="info" round @click="log = false">关闭</el-button>

    	  </span> -->
    </el-dialog>

  </div>
</template>

<script>
  import top from '../top.vue'
  import axios from 'axios'
  import moment from "moment";
  import XLSX from 'xlsx';
  import {
      read,utils
    } from 'xlsx'

  export default {
    components:{
      top
    },
    name: "wuliu",
    data() {
      return {
        shangpinid:"",
        shangpin:"",
        shangpins:[],
        list:[],

        log:false,
        loading:false,
        list:[

        ],
        all:{
          page:1,
          page_size:20,
          start_time:"",
          end_time:""
        },
        total:0,
        shopid:'',
        time:[],
        pickerOptions: {
            // disabledDate(time) {
            //   let curDate = (new Date()).getTime();
            //   let three = 15 * 24 * 3600 * 1000;
            //   let threeMonths = curDate - three;
            //   return time.getTime() > Date.now() || time.getTime() < threeMonths;;
            // }
        },
      }
    },
    created() {
      //店铺权限问题
			this.shopid = JSON.parse(localStorage.getItem('SHOP')).shop_id;
      this.getlist()

    },
    mounted() {

    },
    methods: {
      xuanzhong:function(val){
        this.shangpins.forEach(item=>{
          if(item.id == val){
            this.shangpin = item
          }
        })

      },
      peizhikai:function(){
        this.shangpinid = ""
        this.getlist2()
        this.log = true
      },
      tianjia:function(){

        axios.post('/api/plan-market/activity/phone_charge_goods/store',{goods_list:[this.shangpin]})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.getlist2()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      getlist2: function() {
        axios.get('/api/plan-market/activity/phone_charge_goods/list?_page_size=200')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.list = response.data.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      baocun:function(){

      },
      shanchu:function(item){
        axios.post('/api/plan-market/activity/phone_charge_goods/delete',{goods_ids:[item.id]})
          .then(response => {
            if (response.data.msg.code == 0) {
              this.$message.success('删除成功');
              this.getlist2()
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      daochu:function(){
        axios.post('/api/plan-market/order/phone_charge_export',{start_time:this.all.start_time,end_time:this.all.end_time})
          .then(response => {
            if (response.data.msg.code == 0) {
              location.href = response.data.data.url
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },
      changetime:function(){
        if(!this.checkkong(this.time)){
          this.all.start_time = this.time[0]
          this.all.end_time = this.time[1]
        }else{
          this.all.start_time = ''
          this.all.end_time = ''
        }

        this.getlist()
      },

      search: function() {
        this.all.page = 1
        this.getlist()
      },

      //翻页
      fanye: function(page) {
        this.loading = true
        this.all.page = page
        this.getlist()
      },

      //获取列表
      getlist: function() {
        axios.get('/api/gth/order-pages?status=100&_page_size=2000')
          .then(response => {
            if (response.data.msg.code == 0) {
              this.shangpins = response.data.data.data
            } else {
              this.$message.error(response.data.msg.info);
            }
          })
      },

    }
  }
</script>

<style lang="scss" scoped>
  .wuliu {
    .powertop {
    	display: flex;
    	background:#f9f9f9;
    }
    .powertopli {
    	flex-basis: 180px;
    	line-height: 50px;
    	border-bottom: 3px #F9F9F9 solid;
    	color: #727272;
    	border-right: 1px #F9F9F9 solid;
    	font-size: 16px;
    	text-align: center;
    }
    .router-link-active {
    	background: #FFFFFF;
    	border-bottom: 3px #2974FF solid;
    }
    /deep/ .el-pagination.is-background .btn-prev:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next:disabled{ background: rgba(246, 246, 246, 0.3); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .el-pagination.is-background .btn-next{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .btn-prev{ background: rgba(246, 246, 246,1); border: 1px rgba(167, 167, 167,1) solid;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active{ background-color: #2974FF;}
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled).active:hover {
        color: #fff;
    }
    /deep/ .el-pagination.is-background .el-pager li:not(.disabled):hover {
        color: #2974FF;
    }
    /deep/ .el-pager li{ border-radius: 14px; background: rgba(255, 255, 255, 1); border: 1px rgba(167, 167, 167, 0.3) solid;}
    /deep/ .btn-prev{ border-radius: 14px; padding: 0 10px;}
    /deep/ .btn-next{ border-radius: 14px; padding: 0 10px;}

    /deep/ .el-table th{ background: rgb(246, 246, 246);}
    /deep/ .el-input__inner{ line-height: 36px; height: 36px; font-size: 12px; background: rgb(247, 248, 250);  border: 0;}
    /deep/ .el-date-editor .el-range-input{ background: rgb(247, 248, 250); }
    /deep/ .el-button{ padding: 11px 23px !important;}
    /deep/ .el-button--mini{ padding: 6px 15px !important;}
    /deep/ .el-button--danger {
        color: #FFF;
        background-color: #2974FF;
        border-color: #2974FF;
    }
    .team {
    	background: #F9F9F9;
    }
  }
</style>
